<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" 
          v-model="isAll"
          /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      <Tbody v-for="(obj,index) in goodList" :key="index"
      :name='obj.name'
      :price='obj.price'
      :num='obj.num'
      :index='index'
      :obj='obj'
      ></Tbody>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">{{total}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import Tbody from "@/homework/Tbody.vue";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["SelectAllFn"]),
  },
  components: {
    Tbody,
  },
  computed: {
    ...mapState(["goodList"]),
    // 单选与全选
    isAll: {
      // 当isAll改变时，执行set函数
      set(val) {
        // console.log(val);
        // 调用全选控制单选函数
        this.SelectAllFn(val);
      },
      get() {
        return this.goodList.every((item) => item.checked);
      },
    },
    // 合计
    ...mapGetters(["total"]),
  },
};
</script>

<style>
</style>